<script setup>
import {ref, onMounted, defineProps} from "vue"
import {router} from "../router"

const isPlayModel3 = ref(false)

onMounted(()=>{
    isPlayModel3.value = props.isPlay
})

const isMuted = ref(true)
const isPreload = ref("auto")

/**
 * @imageUrl :番剧图片
 * @videoUrl :番剧视频
 * @isPlay : 一开始是否播放视频
 */
const props = defineProps({
    imageUrl:{type:String},
    videoUrl:{type:String},
    isPlay:{type:Boolean},
    goToWhere:{type:String}
})

const model3Enter = async(event) => {
    isPlayModel3.value = true
}

const model3Leave = async(event) => {
    isPlayModel3.value = false
}

const goToAnime = () => {
    router.push(`/anime-player/${props.goToWhere}`)
}

</script>

<template>
    <div class="allModel3" @mouseenter="model3Enter" @mouseleave="model3Leave" @click="goToAnime">
        <div v-if="isPlayModel3" class="fanBox">
            <video :src="props.videoUrl" :muted="isMuted" autoplay></video>
        </div>
        <div v-else class="fanBox">
            <img :src="props.imageUrl" alt="" />
        </div>
    </div>
</template>

<style scoped>
.allModel3{
    width: 20%;
    height: 77.3%;
    /* background-color: red; */
    border-radius: 5%;
    margin-left: 4%;
    cursor: pointer;
}

.fanBox{
    width: 100%;
    height: 100%;
    border-radius: 5%;
    transition: all 0.5s;
}

.allModel3 .fanBox img{
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: 5%;
}

.allModel3 .fanBox video{
    width: 100%;
    height: 100%;
    border-radius: 5%;
}
</style>